<template>
  <div>
    <!-- from卡片 -->
    <n-card :bordered="false" class="fromCard">
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
    </n-card>
    <!-- table卡片 -->
    <n-card :bordered="false" class="tableCard">
      <BasicTable
        :bordered="false"
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="actionRef"
        :actionColumn="actionColumn"
        @update:checked-row-keys="onCheckedRow"
        :scroll-x="1090"
      >
        <template #tableTitle>
          <div
            style="
              border: 2px solid #2d8cf0;
              height: 32px;
              margin-right: 5px;
              background-color: #2d8cf0;
            "
          ></div>
          <p style="font-size: 15px">交易管理表格</p>
        </template>
      </BasicTable>
    </n-card>
    <!-- 查看模态框 -->
    <n-modal :show="showexamine">
      <n-card style="width: 800px" size="huge" :bordered="false">
        <n-grid x-gap="10" :cols="4" style="margin-bottom: 20px">
          <n-gi span="1">
            <p class="discount" style="margin-bottom: 10px">交易详情</p>
          </n-gi>
          <n-gi span="1"> </n-gi> <n-gi span="1"> </n-gi> <n-gi span="1"> </n-gi>
          <n-gi span="1">
            <n-form-item label="交易时间" path="createdTime">
              <n-input disabled v-model:value="viewmodalInfo.createdTime" />
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="交易流水号" path="txNo">
              <n-input disabled v-model:value="viewmodalInfo.txNo" />
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="商品订单号" path="prodOrdNo">
              <n-input disabled v-model:value="viewmodalInfo.prodOrdNo" />
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="交易状态" path="status">
              <n-select v-model:value="viewmodalInfo.status" disabled :options="menuStateOptions" />
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="交易金额" path="txAmt">
              <n-input disabled v-model:value="viewmodalInfo.txAmt" />
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="交易币别" path="ccy">
              <n-input disabled v-model:value="viewmodalInfo.ccy"> HPC </n-input>
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="交易会员" path="memNo">
              <n-input disabled v-model:value="viewmodalInfo.memNo" />
            </n-form-item>
          </n-gi>

          <n-gi span="1"> </n-gi>
          <n-gi span="1">
            <p class="discount" style="margin-bottom: 10px">折扣详情</p>
          </n-gi>
          <n-gi span="1"> </n-gi> <n-gi span="1"> </n-gi> <n-gi span="1"> </n-gi>
          <n-gi span="1">
            <n-form-item label="折扣编码" path="disctNo">
              <n-input disabled v-model:value="viewmodalInfo.disctNo" />
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="折扣发放时间" path="disctTime">
              <n-input disabled v-model:value="viewmodalInfo.disctTime" />
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="折扣总额" path="disctAmt">
              <n-input disabled v-model:value="viewmodalInfo.disctAmt" />
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="折扣币别" path="ccya">
              <n-input disabled v-model:value="viewmodalInfo.ccya" />
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="会员获得金额" path="memAmt">
              <n-input disabled v-model:value="viewmodalInfo.memAmt" />
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="平台获得金额" path="platformAmt">
              <n-input disabled v-model:value="viewmodalInfo.platformAmt" />
            </n-form-item>
          </n-gi>
          <n-gi span="1">
            <n-form-item label="推荐人获得金额" path="recommendAmt">
              <n-input disabled v-model:value="viewmodalInfo.recommendAmt" />
            </n-form-item>
          </n-gi>
        </n-grid>
        <template #action>
          <n-space class="viewButton">
            <n-button type="info" :loading="formBtnLoading" @click="() => (showexamine = false)"
              >确定</n-button
            >
          </n-space>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { h, reactive, ref } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Formtrage/index';
import { getTableList } from '@/api/table/list';
import { columns } from './columns';
import { PlusOutlined } from '@vicons/antd';
import { useRouter } from 'vue-router';
import { tradeListApi } from '@/api/trade/list';
import { initiateRefund } from '@/api/refundapply/Initiate';
import { tradeInfoApi } from '@/api/trade/info';
import formatDate from '@/utils/timestamp';
import { createStorage } from '@/utils/Storage';
import clear from 'naive-ui/lib/_internal/clear';

const Storage = createStorage({ storage: localStorage });
const tradeListparm = ref({
  memNo: '',
  startTime: '',
  endTime: '',
  status: '',
  txNo: '',
  prodOrdNo: '',
  refundStatus: '',
  withdrawMethod: '',
  pageNum: 1,
  pageSize: 10,
});

const menuStateOptions = [
  {
    label: '待支付',
    value: 0,
  },
  {
    label: '已支付',
    value: 1,
  },
  {
    label: '失效',
    value: 2,
  },
];
// 获取交易管理列表
const jurisdiction = ref({});
const loadDataTable = async (res) => {
  console.log(res);
  tradeListparm.value.pageNum = res.page;
  tradeListparm.value.pageSize = res.pageSize;
  let data = await tradeListApi(tradeListparm.value);
  jurisdiction.value = data.data.body.list;
  data.data.body.list.forEach((val) => {
    // val.createdTime = formatDate(new Date(val.createdTime));
    val.ccya = 'HPC';
    if (val.txTpe == '00') {
      val.txTpe = '提现';
    } else if (val.txTpe == '01') {
      val.txTpe = '转账';
    } else if (val.txTpe == '02') {
      val.txTpe = '支付';
    } else if (val.txTpe == '03') {
      val.txTpe = '退款';
    } else {
      val.txTpe = '无';
    }
    if (val.status == '0') {
      val.status = '待支付';
    } else if (val.status == '1') {
      val.status = '已支付';
    } else if (val.status == '2') {
      val.status = '失效';
    } else {
      val.status = '无';
    }
    if (val.refundStatus == true) {
      val.refundStatus = '已有退款';
    } else {
      val.refundStatus = '无记录';
    }
  });
  let datas = {
    list: data.data.body.list,
    page: data.data.body.page,
    pageSize: data.data.body.pageSize,
    pageCount: Math.ceil(data.data.body.total / res.pageSize),
  };
  console.log(datas);
  return datas;
};

const schemas = [
  {
    field: 'makeDate',
    component: 'NDatePicker',
    label: '交易日期：',
    componentProps: {
      closeOnSelect: true,
      updateValueOClose: true,
      type: 'daterange',
      actions: ['confirm'],
      clearable: false,
      onUpdateValue: (e) => {
        tradeListparm.value.startTime = e[0];
        tradeListparm.value.endTime = e[1] + 1000 * 60 * 60 * 24 - 1;
      },
    },
  },
  {
    field: 'prodOrdNo',
    component: 'NInput',
    label: '商品订单号：',
    componentProps: {
      actions: ['clear'],
      placeholder: '请输入商品订单号',
      maxlength: 20,
      onInput: (e: any) => {
        tradeListparm.value.prodOrdNo = e;
      },
    },
  },
  {
    field: 'memNo',
    component: 'NInput',
    label: '会员号：',
    componentProps: {
      maxlength: 20,
      placeholder: '请输入会员号',
      onInput: (e: any) => {
        tradeListparm.value.memNo = e;
        console.log(e);
      },
    },
  },
  {
    field: 'status',
    component: 'NSelect',
    label: '交易状态：',
    componentProps: {
      placeholder: '请选择交易状态',
      options: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '待支付',
          value: 0,
        },
        {
          label: '已支付',
          value: 1,
        },
      ],
      onUpdateValue: (e: any) => {
        tradeListparm.value.status = e;
        console.log(e);
      },
    },
  },
  {
    field: 'refundStatus',
    component: 'NSelect',
    label: '有无退款：',
    componentProps: {
      placeholder: '请选择',
      options: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '有退款',
          value: true,
        },
        {
          label: '无退款',
          value: false,
        },
      ],
      onUpdateValue: (e: any) => {
        tradeListparm.value.refundStatus = e;
        console.log(e);
      },
    },
  },
  {
    field: 'txNo',
    component: 'NInput',
    label: '交易流水：',
    componentProps: {
      maxlength: 20,
      placeholder: '请输入交易流水',
      onInput: (e: any) => {
        tradeListparm.value.txNo = e;
        console.log(e);
      },
    },
  },
];

const router = useRouter();
const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();

const showRefund = ref(false);
const showexamine = ref(false);
const formBtnLoading = ref(false);
const formParams = reactive({
  name: '',
  address: '',
  date: null,
});

const params = ref({
  pageSize: 5,
  name: 'xiaoMa',
});

let authorityJson = Storage.get('OPERATORLIST');
const authority = JSON.parse(authorityJson);

// 列表行为
const actionColumn = reactive({
  width: 220,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction as any, {
      style: 'button',
      actions: [
        {
          label: '查看',
          text: true,
          color: '#2d8cf0',
          onClick: handexamine.bind(null, record),
          ifShow: () => {
            return authority.includes('viewTradeInfo');
          },
        },
      ],
      select: (key) => {
        message.info(`您点击了，${key} 按钮`);
      },
    });
  },
});

const [register, {}] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas,
});

function onCheckedRow(rowKeys) {
  console.log(rowKeys);
}

const viewParm = ref({
  prodOrdNo: '',
});

const viewmodalInfo = ref({
  txNo: '',
  txAmt: '',
  metNo: '',
  refundOrdNo: '',
  payeeOrdNo: '',
  prodOrdNo: '',
  refundAmt: '',
  disctAmt: '',
  platRefundDisc: '',
  recommendAmt: '',
  status: '',
  createdTime: '',
  disctTime: '',
  memAmt: '',
  platformAmt: '',
  remarks: '',
  ccy: 'HPC',
  ccya: '',
  memNo: '',
  disctNo: '',
});

// 查看交易管理信息详情
function handexamine(record: Recordable) {
  viewParm.value.prodOrdNo = record.prodOrdNo;
  tradeInfoApi(viewParm.value).then((val) => {
    console.log(val);
    viewmodalInfo.value.disctNo = val.data.body.disctNo;
    // 如果不存在折扣时下列有关折扣的输入不展示
    if (!val.data.body.disctNo) {
      viewmodalInfo.value.disctTime = ''; //折扣放放时间
      viewmodalInfo.value.disctAmt = ''; //折扣总额
      viewmodalInfo.value.ccya = ''; // 折扣币别
      viewmodalInfo.value.memAmt = ''; //会员获得金额
      viewmodalInfo.value.platformAmt = ''; // 平台获得金额
      viewmodalInfo.value.recommendAmt = ''; //推荐人获得金额
    } else {
      viewmodalInfo.value.disctTime = formatDate(new Date(val.data.body.disctTime));
      viewmodalInfo.value.disctAmt = val.data.body.disctAmt;
      viewmodalInfo.value.ccya = val.data.body.ccy;
      viewmodalInfo.value.memAmt = val.data.body.memAmt;
      viewmodalInfo.value.platformAmt = val.data.body.platformAmt;
      viewmodalInfo.value.recommendAmt = val.data.body.recommendAmt;
    }
    viewmodalInfo.value.txNo = val.data.body.txNo;

    viewmodalInfo.value.memNo = val.data.body.memNo;
    viewmodalInfo.value.txAmt = val.data.body.txAmt;
    viewmodalInfo.value.metNo = val.data.body.metNo;
    viewmodalInfo.value.refundOrdNo = val.data.body.refundOrdNo;
    viewmodalInfo.value.payeeOrdNo = val.data.body.payeeOrdNo;
    viewmodalInfo.value.prodOrdNo = val.data.body.prodOrdNo;
    viewmodalInfo.value.refundAmt = val.data.body.refundAmt;

    viewmodalInfo.value.platRefundDisc = val.data.body.platRefundDisc;

    viewmodalInfo.value.status = val.data.body.status;
    if (viewmodalInfo.value.status == '0') {
      viewmodalInfo.value.status = '待支付';
    } else if (viewmodalInfo.value.status == '1') {
      viewmodalInfo.value.status = '已支付';
    } else if (viewmodalInfo.value.status == '2') {
      viewmodalInfo.value.status = '失效';
    } else {
      viewmodalInfo.value.status = '暂无';
    }
    // viewmodalInfo.value.createdTime = formatDate(new Date(val.data.body.createdTime));

    viewmodalInfo.value.remarks = val.data.body.remarks;
    console.log(viewmodalInfo.value.TxnRefundInfo);
  });
  showexamine.value = true;
}

function reloadTable() {
  actionRef.value.reload();
}

function handleSubmit(values: Recordable) {
  reloadTable();
}

function handleReset(values: Recordable) {
  tradeListparm.value.memNo = '';
  tradeListparm.value.startTime = '';
  tradeListparm.value.endTime = '';
  tradeListparm.value.status = '';
  tradeListparm.value.txNo = '';
  tradeListparm.value.prodOrdNo = '';
  tradeListparm.value.refundStatus = '';
  tradeListparm.value.withdrawMethod = '';
  reloadTable();
}
</script>

<style lang="less" scoped>
.fromCard {
  margin-top: 12px;
  border: 1px solid rgb(226, 229, 229);
  margin-bottom: 8px;
}
.tableCard {
  border: 1px solid rgb(226, 229, 229);
}
.viewButton {
  margin-left: 650px;
}
.discount {
  font-size: 18px;
  margin-top: 15px;
}
</style>
